<template>
  <div :class="{'is-fullscreen': isFullscreen}" class="view-design d-layout-container d-layout-container-nofooter d-layout-container-dark">
    <div class="design-header d-layout-header">
      <!-- <el-menu
        :default-active="activeIndex"
        class="design-menus"
        mode="horizontal"
        @select="handleSelect"
        background-color="#324156"
        text-color="#fff"
        active-text-color="#439eff">
        <el-submenu index="1">
          <template slot="title">表单</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">表格</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">图表</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="4">菜单</el-menu-item>
      </el-menu> -->
      <div class="design-actions">
        <el-select v-if="isShowLayout" @change="handleChageLayout" v-model="stock.state.page.meta.name" placeholder="切换布局" size="mini">
          <el-option
            v-for="item in stock.state.layoutCollection"
            :key="item.name"
            :label="item.text"
            :value="item.name">
          </el-option>
        </el-select>
        <el-button v-if="isShowFullscreen" @click="handleFullScreen" icon="el-icon-full-screen" size="mini">全屏</el-button>
        <FileChooser v-if="isShowImport" @change="handleImport" :button="{icon:'el-icon-upload2',size:'mini'}" text="导入" accept="	application/json" />
        <el-button v-if="isShowExport" @click="handleExport" icon="el-icon-download" size="mini">导出</el-button>
        <Switcher v-if="isShowComponent" v-model="isExpandSide" labelOn="组件" labelOff="组件" size="xs" />
        <Switcher v-if="isShowProperty" v-show="stock.state.layoutPropertyView" v-model="isExpandProp" labelOn="属性" labelOff="属性" size="xs" />
        <Switcher v-if="isShowThrough" v-model="isThrough" labelOn="穿透" labelOff="穿透" size="xs" />
      </div>
      <slot name="header"></slot>
    </div>
    <div :class="{'design-body-through': isThrough}" class="design-body d-bg-fog">
      <div
        :class="{'design-side-collapse': !isExpandSide}"
        class="design-side">
        <DComponents :stock="stock" />
      </div>
      <div
        v-show="stock.state.layoutPropertyView"
        :class="{'design-property-collapse': !isExpandProp}"
        class="design-property">
        <DProperty :stock="stock" ref="dproperty" />
      </div>
      <div class="design-render d-layout-content">
        <DRender v-if="isShowRender" :stock="stock" ref="drender" />
      </div>
    </div>
  </div>
</template>

<script>
import { Switcher } from '@daelui/vdog/dist/components'
import { filer, parser } from '@daelui/dogjs/dist/components'
import FileChooser from '@/components/uploader/file-chooser.vue'
import DComponents from './dcomponents.vue'
import DRender from './drender.vue'
import DProperty from './dproperty.vue'
import stock from '@/service/stock/index'

export default {
  components: {
    Switcher,
    FileChooser,
    DComponents,
    DRender,
    DProperty
  },

  props: {
    isShowLayout: {
      type: Boolean,
      default: false
    },
    isShowFullscreen: {
      type: Boolean,
      default: true
    },
    isShowImport: {
      type: Boolean,
      default: true
    },
    isShowExport: {
      type: Boolean,
      default: true
    },
    isShowComponent: {
      type: Boolean,
      default: true
    },
    isShowProperty: {
      type: Boolean,
      default: true
    },
    isShowThrough: {
      type: Boolean,
      default: true
    },
    stock: {
      type: Object,
      default () {
        return stock
      }
    }
  },

  data () {
    return {
      activeIndex: '1',
      isFullscreen: false,
      isExpandSide: true,
      isExpandProp: true,
      isThrough: false,
      isShowRender: true
    }
  },

  watch: {
    isExpandSide () {
      this.updateView()
    },
    isExpandProp () {
      this.updateView()
    }
  },

  methods: {
    // 初始化
    init () {
      // 进入设计态
      this.stock.state.isDesign = true
    },

    // 设置布局列表
    setLayoutCollection (list) {
      this.stock.setter.setLayoutCollection(list)
    },
    // 设置组件列表
    setComponentCollection (list) {
      this.stock.setter.setComponentCollection(list)
    },
    // 设置页面数据
    setPageState (page) {
      this.stock.state.page = page
    },

    // 插入组件
    handleInsertComponent (component) {
      this.stock.setter.insertComponent(component)
    },

    /**
     * @function 获取元数据
    */
    getMetaValue () {
      return this.$refs.drender.getMetaValue()
    },

    handleSelect () {},

    /**
     * @function 更新视图
    */
    updateView () {
      this.$refs.drender.updateView()
    },

    // 全屏
    handleFullScreen () {
      if (document.documentElement.RequestFullScreen) {
        document.documentElement.RequestFullScreen()
      }
      // 兼容火狐
      if(document.documentElement.mozRequestFullScreen){
        document.documentElement.mozRequestFullScreen()
      }
      // 兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
      if(document.documentElement.webkitRequestFullScreen){
        document.documentElement.webkitRequestFullScreen()
      }
      // 兼容IE,只能写msRequestFullscreen
      if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen()
      }
    },

    onFullscreen () {
      this.isFullscreen = !this.isFullscreen
    },

    // 导入
    handleImport (files) {
      files = Array.isArray(files) ? files : []
      let file = files[0]
      if (file) {
        filer.readFileText(file.file).then(text => {
          let data = parser.toObject(text, true) || {}
          if (data && data.meta) {
            this.stock.state.page = data
          }
        }).catch(() => {
          this.$message({
            message: '解析失败',
            type: 'error'
          })
        })
      } else {
        this.$message({
          message: '未读取到文件',
          type: 'warning'
        })
      }
    },

    // 导出
    handleExport () {
      let page = this.stock.state.page
      page.meta = this.getMetaValue()
      let content = parser.stringify(page, null, '  ')
      filer.downloadFile(this.trimSpecial((page.name || page.code || Date.now())) + '.json', content)
    },
    // 清除特殊字符
    trimSpecial (string) {
      //替换字符串中的所有特殊字符（包含空格）
      if (string !== '') {
        const pattern = /[`~!@#$^\-&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g
        string = string.replace(pattern, '')
      }
      return string
    },

    // 修改布局
    handleChageLayout () {
      this.isShowRender = false
      setTimeout(() => {
        this.isShowRender = true
      }, 100)
    }
  },

  beforeMount () {
    this.init()
  },

  mounted () {
    this.triggerFullscreen = this.onFullscreen.bind(this)
    let events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange']
    events.forEach((item) => {
      window.addEventListener(item, this.triggerFullscreen, false)
    })
  },

  beforeDestroy() {
    let events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange']
    events.forEach((item) => {
      window.removeEventListener(item, this.triggerFullscreen)
    })
  }
}
</script>

<style lang="less" scoped>
.view-design {
  overflow: hidden;
  width: 100%;
  &.is-fullscreen {
    .design-header {
      display: none;
    }
    .design-body {
      height: calc(100vh);
    }
  }
  .design-body-through {
    /deep/ .d-drag-resizer {
      &:before {
        display: none;
      }
    }
    /deep/ .d-dr-de-nesw {
      display: none;
    }
  }
  .design-header {
    .design-name {
      float: left;
      display: flex;
      align-items: center;
      padding-left: 8px;
      height: 100%;
    }
    .design-actions {
      float: right;
      display: flex;
      height: 100%;
      align-items: center;
      padding-right: 8px;
      /deep/ .d-btn,
      /deep/ .d-switch-slider,
      /deep/ .el-button {
        margin-left: 8px;
      }
    }
  }
  .design-body {
    height: calc(100vh - 48px);
    &:after {
      content: "";
      display: block;
      clear: both;
    }
  }
  .design-side {
    float: left;
    position: relative;
    overflow: visible;
    width: 168px;
    height: 100%;
    z-index: 11;
    .item-component {
      cursor: pointer;
    }
    .component-name {
      text-align: center;
    }
  }
  .design-side-collapse {
    width: 0;
    /deep/.components-paner {
      overflow: hidden;
      width: 0;
    }
  }
  .design-render {
    overflow: auto;
    height: 100%;
    background:#ddd;
    background-image: linear-gradient(white 0px,transparent 0),
    linear-gradient(90deg, white 0px,transparent 0),
    linear-gradient(hsla(0,0%,100%,.6) 1px,transparent 0),
    linear-gradient(90deg,hsla(0,0%,100%,.6) 1px,transparent 0);
    background-size: 64px 64px, 64px 64px, 64px 16px, 64px 16px;
  }
  @width: 512px;
  .design-property {
    float: right;
    position: relative;
    overflow: auto;
    width: @width;
    height: 100%;
    z-index: 11;
  }
  .design-property-collapse {
    width: 0;
    /deep/.property-paner {
      overflow: hidden;
      width: 0;
    }
  }
}
</style>

<style lang="less">
.design-menus {
  float: left;
  width: 33%;
  &.el-menu--horizontal>.el-menu-item {
    height: 48px;
    line-height: 48px;
  }
  &.el-menu--horizontal>.el-submenu .el-submenu__title {
    height: 48px;
    line-height: 48px;
  }
}
.el-tabs-paner {
  .el-tabs__header {
    margin-bottom: 0;
  }
  .el-tabs__nav {
    margin-left: 16px;
  }
  .el-collapse-item__wrap {
    padding-top: 8px;
    background: #f2f2f7;
  }
  .el-collapse-item__content {
    padding-bottom: 8px;
  }
}
</style>
